<template>
  <div class="goods-item" @click="goGoodsDetail">
    <!-- 商品图片 -->
    <div class="goods-img-box">
      <img :src="goodsConstants.goodsPictureBaseURL+goods.goodsPicturePath" alt="">
    </div>
    <div class="font-box">
      <!-- 商品名 -->
      <div class="goods-name">{{ goods.goodsName }}</div>
      <!-- 商品价格和销售量 -->
      <div class="money-box">
        <span>￥</span>
        <span>{{ goods.goodsPrice.split('.')[0] }}</span>
        <span>.</span>
        <span>{{ goods.goodsPrice.split('.')[1] }}</span>
        <span>{{ goods.goodsSaleNumber }}人付款</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsListItem',
  props: ['goods'],
  methods: {
    goGoodsDetail() {
      // console.log(123123)
      this.$router.push({
        name: 'goodsDetail',
        query: {
          goodsId: this.goods.id
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
// 商品项样式
.goods-item {
  display: inline-block;
  // overflow: hidden;
  width: 47%;
  margin: 0 0 2% 0;
  border-radius: 1rem;
  background-color: #fff;
  // 商品图片样式
  .goods-img-box {
    overflow: hidden;
    height: 12.15rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    img {
      display: block;
      height: 100%;
      margin: 0 auto;
      // vertical-align: middle;
    }
  }
  // 文字样式
  .font-box {
    padding: 0.4rem 0.7rem 0.7rem;
    // 商品名样式
    .goods-name {
      /* 文字一行显示，不进行换行显示 */
      white-space: nowrap;
      /* 文字的溢出部分进行隐藏 */
      overflow: hidden;
      /* 文字超出部分使用省略号(ellipsis)代替 */
      text-overflow: ellipsis;
    }
    // 商品价格样式
    .money-box {
      margin-top: 0.5rem;
      color: #ee0a24;
      span:nth-child(1),
      span:nth-child(4) {
        font-size: 0.8rem;
      }
      span:nth-child(2) {
        font-size: 1.2rem;
      }
      span:nth-child(5) {
        margin: 0 0 0 0.5rem;
        font-size: 0.8rem;
        color: #888;
      }

    }
  }
}
.goods-item:nth-child(2n-1) {
  margin: 0 2%;
}
</style>